<script setup>
import { getOneTeamProfile } from "@/api/teamUp";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { SUCCESS } from "@/core/constants/HttpStatus";

const route = useRoute();
const router = useRouter();
const tpId = ref(""); //队伍id
const teamMessage = ref([]); //队伍信息
const tpTeamIntro = ref("");
const tpAbilityNeed = ref("");
//获取详情页数据
const loadPage = async (tpId) => {
  try {
    const res = await getOneTeamProfile({ tpId: tpId.value });
    console.log(res);
    const { code, data, msg } = res.data;
    if (code == SUCCESS) {
      if (msg == "查找成功") {
        teamMessage.value = data;
        if (teamMessage.value.tpTeamIntro && teamMessage.value.tpAbilityNeed) {
          tpTeamIntro.value = String(teamMessage.value.tpTeamIntro).replaceAll(
            /<br>/g,
            "\n"
          );
          tpAbilityNeed.value = String(
            teamMessage.value.tpAbilityNeed
          ).replaceAll(/<br>/g, "\n");
          document.getElementById("tpContent").innerHTML = tpTeamIntro.value;
          document.getElementById("abilityNeed").innerHTML =
            tpAbilityNeed.value;
        } else {
          return;
        }
      } else {
        teamMessage.value = [];
        ElMessage.error(msg);
      }
    } else {
      throw new Error(msg);
    }
  } catch (error) {
    ElMessage.error(error.message || "获取详情信息失败");
  }
};

onMounted(() => {
  tpId.value = route.query.tpId;
  loadPage(tpId);
  document.documentElement.scrollTop = 0;
});

const goBack = () => {
  router.back();
};
</script>
<template>
  <div class="team-main">
    <div class="content-box">
      <div class="title">
        <h3>队伍名称： {{ teamMessage.tpTeamName }}</h3>
        <p class="iconfont icon-guanbi" @click="goBack"></p>
      </div>
      <div class="appli-message">
        <h3 class="projectname">
          赛事名称：
          <p>{{ teamMessage.tpProjectName }}</p>
        </h3>

        <h3>
          队伍规模：
          <p>
            教师{{ teamMessage.tpTeacherNumber }}名 学生{{
              teamMessage.tpNeedStudentNumber
            }}名
          </p>
        </h3>
        <h3>
          当前所需学生人数：
          <p>{{ teamMessage.tpDifference }}名</p>
        </h3>
        <h3>
          招募截止时间：
          <p>{{ teamMessage.tpRegistrationDeadline }}</p>
        </h3>
        <h3>
          联系方式：
          <p>{{ teamMessage.tpContact }}</p>
        </h3>

        <h3 class="profile-title">项目简介：</h3>
        <span id="tpContent" class="profile-content"> </span>

        <h3 class="profile-title">能力需求：</h3>
        <p id="abilityNeed" class="profile-content"></p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.team-main {
  .content-box {
    width: 900px;
    min-height: 400px;
    background-color: #fafafa;
    border: 1px solid #f2f2f2;

    margin: 0px auto;
    padding: 20px 30px;

    .title {
      font-size: 20px;
      display: grid;
      grid-template-columns: 99% 1%;
      margin-left: 20px;
      margin-bottom: 20px;
      .icon-guanbi {
        color: gray;
        text-decoration: none;
      }
    }
    .appli-message {
      display: flex;
      flex-wrap: wrap;
      margin: 0px 20px;

      h3 {
        line-height: 50px;
        display: flex;
        flex-direction: row;
        width: 50%;
        p {
          font-size: 18px;
          font-weight: 400;
        }
      }
      .projectname {
        width: 100%;
        display: flex;
        flex-direction: row;
      }

      .profile-title {
        width: 100%;
      }
      .profile-content {
        width: 100%;
        font-size: 18px;
        word-wrap: break-word;
      }
    }
  }
}
</style>